<template>
	<view class="cur_search">
		<view class="search">
			<text class="iconfont icon">&#xe618;</text>
			<input type="text" placeholder="请输入搜索内容"
			 class="input" placeholder-style="font-size:13px;"
			 @input="search" v-model="keyword"/>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	const keyword = ref('')
	
	const emit = defineEmits(['search'])
	
	const search = (e) => { // 当键盘输入时触发
		emit('search',e.detail.value)
	}
	
</script>

<style lang="less" scoped>
	.cur_search{
		height: 80rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		padding: 5rpx 50rpx;
		border-radius: 2rpx solid #999;
		background-color: #fff;
		.search{
			flex: 1;
			height: 65rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			padding-left: 15rpx;
			border-radius: 15rpx;
			background-color: #f5f5f5;
			.icon{
				font-size: 35rpx;
			}
			.input{
				flex: 1;
				margin-left: 10rpx;
			}
		}
	}
</style>